<template>
  <div>
    <h1>票务详情</h1>
    <el-divider/>
    <el-row justify="space-around">
      <div v-for="ticket in ticketList" :key="ticket.scenicTicketId">
      <el-card v-if="ticket.scenicTicketStatus!=='Expire'" shadow="never" style="width: 300px">
        <template #header>
          <strong>{{ ticket.scenicTicketName }}</strong>
        </template>
        <div>
          <p style="text-align: left">{{ ticket.scenicTicketDescription }}</p>
          <h3>价格：￥{{ ticket.scenicTicketPrice }}/人</h3>
          <h3>开始时间：{{ticket.scenicTicketStart.substring(0,10)}}</h3>
          <h3>截止时间：{{ticket.scenicTicketExpire===null ? '长期有效' : ticket.scenicTicketExpire.substring(0,10)}}</h3>
          <router-link style="text-decoration: none" :to="`/smart/buyTicket/${ticket.scenicTicketId}`">
            <el-button
                v-if="Date.now()>new Date(ticket.scenicTicketStart).getTime() &&
                Date.now() < new Date(ticket.scenicTicketExpire).getTime()"
                class="el-button"
                type="primary" size="large">点击购买</el-button>
          </router-link>
        </div>
      </el-card>
      </div>
    </el-row>
    <el-divider/>
    <el-pagination
        style="background-color: #ffffff;border-radius:0  0 5px 5px;justify-content: center"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="pageSize"
        :layout="layout"
        :total="total"
        :pager-count=5
    >
    </el-pagination>
  </div>
</template>

<script>
import {getTickets} from "@/api/ticket";
import {getDevice} from "@/utils/get-device";

export default {
  name: "ticket",
  data(){
    return{
      search:'',
      ticketList:[],
      currentPage:1,
      total:0,
      pageSize:10,
      ticketType:{'UnExpire':'未过期','Expire':'已过期'},
      showBtn:false,
      layout:'total, sizes, prev, pager, next, jumper',
    }
  },
  computed:{
  },
  mounted() {
    if (getDevice()){
      this.layout='total,prev, pager, next'
    }
    this.getTicketList()
  },
  methods:{
    handleSizeChange(val) {
      this.pageSize = val
      this.getTicketList()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getTicketList()
    },
    getTicketList(){
      getTickets(this.currentPage,this.pageSize).then(response=>{
        this.ticketList=response.data.ticketList
        this.total=response.data.total
      })
    }
  }
}
</script>

<style scoped>
.el-button{

}
</style>
